<template>
<div :style="wrapStyle">
    <div ref="swiper" class="swiper-container"
        :id='swiperId'
        :style='containerStyle'>
        <div class="swiper-wrapper">
            <slot></slot>
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <div v-if="pagination"
        class="swiper-pagination"
        :style='paginationStyle'></div>
    <!-- 如果需要导航按钮 -->
    <div v-if="navigation"
        class="swiper-button-prev"
        :style='prevStyle'></div>
    <div v-if="navigation"
        class="swiper-button-next"
        :style='nextStyle'></div>
    <!-- 如果需要滚动条 -->
    <!-- <div :class="swiperScrollbar"></div> -->
</div>

</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
    data () {
        return {

        }
    },
    watch: {
        data () {
            setTimeout( () => {
                this.update()
            },20)
        }
    },
    props: {
        data: {
            type: Array,
            default: () => []
        },
        options: {
            type: Object,
            default: () => ({})
        },
        wrapStyle: {
            type: String,
            default: ''
        },
        containerStyle: {
            type: String,
            default: ''
        },
        swiperId: {
            type: String,
            default: ''
        },
        prevStyle: {
            type: String,
            default: ''
        },
        nextStyle: {
            type: String,
            default: ''
        },
        navigation: {
            type: Boolean,
            default: false
        },
        pagination: {
            type: Boolean,
            default: false
        },
        paginationStyle: {
            type: String,
            default: ''
        },
        slideEnd: {
            type: Boolean,
            default: false
        }
    },
    mounted () {
        setTimeout( () => {
            this._init_swiper()
        },20)
    },
    methods: {
        _init_swiper () {
            if ( !this.$refs.swiper ) return;
            this.swiper = new Swiper('#' + this.swiperId, Object.assign(
            {
                direction: 'horizontal', // 水平切换选项
                autoplay: true,
                loop: true, // 循环模式选项
                observer:true,//监视器
                observeParents: true,
                pagination: this.pagination ? {
                    el: '.swiper-pagination',
                    clickable: true  
                } : {},
                navigation: this.navigation ? {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                } : {},
            }, this.options));
        },
        update () {
            this.swiper.update()
            this.swiper.slideTo(0, 500, false);
        }
    }
}
</script>
<style lang="less">
    //
</style>
